<template>
	<div class = "movieDetail">
		<div class="imgWrap">
			<img :src="coverInfo.detailcover">
		</div>
		<div class = "main">
			<h2>{{list.title}}</h2>
			<h3>—— 关于《{{coverInfo.title}}》</h3>
			<p class = "user" v-if = "list.user">文 / {{list.user.user_name}}</p>
			<div class = "content" v-html = "list.content"></div>
			<p class = "editor">{{list.charge_edt}} {{list.editor_email}}</p>
			<p class = "copyright">{{list.copyright}}</p>
		</div>
		<comment :type = "type" :id = "list.movie_id"></comment>
		<download></download>
		<paging :type = "type" :next = "list.next_id" :prev = "list.previous_id"></paging>
	</div>
</template>

<script>
import axios from 'axios'
import download from '@/common/download'
import comment from '@/common/comment'
import paging from '@/common/paging'
export default {
	name : 'movieDetail',
	components : {
		download,
		comment,
		paging
	},
	data () {
		return {
			coverInfo:{},
			list : {},
			type : "movie"
		}
	},
	methods : {
		getData () {
			axios.get("http://v3.wufazhuce.com:8000/api/movie/"+this.$route.params.movie_id+"/story/1/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getDataSucc);
		},
		getDataSucc (res) {
			if(res.data.res === 0 && res.data.data){
				this.list = res.data.data.data[0];
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		},
		getCoverImg () {
			axios.get("http://v3.wufazhuce.com:8000/api/movie/detail/"+this.$route.params.movie_id).then(this.getCoverImgSucc);
		},
		getCoverImgSucc (res) {
			if(res.data.res === 0 && res.data.data){
				this.coverInfo = res.data.data;
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getCoverImg();
		this.getData();
	},
	watch : {
		$route : function() {
			this.getCoverImg();
			this.getData();
		}
	}
}
</script>

<style lang = "less" scoped>
	.movieDetail {
		padding-top:.88rem;
		.imgWrap {
			height:0;
			overflow:hidden;
			padding-bottom:62.5%;
			img{
				width:100%;
				float:left;
			}
		}
		.main{
			padding:0 .4rem;
			h2 {
				font-size:.6rem;
				line-height:.8rem;
				font-weight:700;
			}
			h3 {
				font-size:.34rem;
				margin:.6rem 0 1rem;
			}
			.user {
				text-align: center;
				font-size:.28rem;
				margin-bottom:.8rem;
			}
			.content {
				/deep/ p {
					font-size: .36rem;
				    font-weight: 300;
				    line-height: .6rem;
				    margin-bottom:.6rem;
				}
				/deep/ img {
					width:100%;
				}
			}
			.editor,
			.copyright{
				color: #808080;
			    font-style: oblique;
			    margin: .4rem;
			    font-size: .24rem;
			}
		}
	}
</style>